<template>
  <div class="table-tree">
    <table-item v-for="item in dataSource" :item="item" :keys="keys" :key="item.key" @on-click="onClick"/>
  </div>
</template>

<script>
  import TableItem from './TableItem.vue'

  export default {
    name: 'table-tree',
    components: { TableItem },
    props: {
      dataSource: {
        type: Array,
        default: function () {
          return []
        }
      },
      keys: {
        type: Array,
        default: function () {
          return []
        }
      }
    },
    data() {
      return {
        selects: new Set([...this.keys])
      };
    },
    methods: {
      onClick(state, value) {
        if (state) {
          this.selects.add(value)
        } else {
          this.selects.delete(value)
        }
        this.$emit('change', this.selects.values());
      },
    }
  }
</script>

<style scoped>
  .table-tree{border: 1px solid #e5e5e5; border-bottom: 0;}
</style>
